<template>
  <div class="nav-header">
    <!-- 左边区域 -->
    <div class="header-left">
      <!-- logo区域 -->
      <div class="logo">
        <img class="img" src="~@/assets/img/logo.svg" alt="" />
        <span>后台管理系统</span>
      </div>
      <!-- 菜单区域 -->
      <el-menu
        text-color="#8cc4fd"
        active-text-color="#1989fb"
        class="el-menu-horizontal"
        mode="horizontal"
        :default-active="activePath"
        router
      >
        <el-menu-item :index="menus[0]">用户管理</el-menu-item>
        <el-menu-item :index="menus[1]">商城管理</el-menu-item>
        <el-menu-item :index="menus[2]">文章管理</el-menu-item>
      </el-menu>
    </div>
    <!-- 右边区域 -->
    <div class="header-right">
      <!-- 用户区域 -->
      <div class="userInfo">
        <el-dropdown>
          <span class="info">
            <el-avatar
              size="small"
              src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
            ></el-avatar>
            <span class="name">{{ name }}</span>
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <template slot="dropdown">
            <el-dropdown-menu>
              <el-dropdown-item>用户信息</el-dropdown-item>
              <el-dropdown-item>系统管理</el-dropdown-item>
              <el-dropdown-item divided @click="handleExitClick()"
                >退出登录</el-dropdown-item
              >
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script>
// import dataCache from '@/utils/dataCache.js'
export default {
  data() {
    return {
      activePath: '/user',
      menus: ['/user', '/mall', '/article'],
      name: 'coderyyyy'
    }
  },
  components: {},
  methods: {
    handleExitClick() {
      console.log('click')
      // dataCache.deleteCache('token')
      // this.$router.push('/login')
    }
  }
}
</script>

<style lang="less" scoped>
.nav-header {
  height: 100%;
  display: flex;
  justify-content: space-between;
  .header-left {
    display: flex;
    .logo {
      height: 30px;
      padding: 15px 20px 20px 7px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .img {
        height: 100%;
        margin: 0 10px;
      }
      span {
        font-size: large;
        color: #409eff;
      }
    }
  }
  .header-right {
    display: flex;
    align-items: center;
    .userInfo {
      .info {
        display: flex;
        align-items: center;
        cursor: pointer;
        .el-avatar {
          margin-right: 7px;
        }
      }
    }
  }
}
</style>
